<template>
	<view class="u-border-top">

		<view class="u-m-t-20" style="background: #fff;">

			<view class="u-f u-border-bottom u-p-30" v-for="(item,index) in formList" :key="index"
				v-if="item.type!='addList'">
				<view class="u-f1"><text v-if="item.rule" style="color: red;margin-right: 5rpx;">*</text>
					{{item.title}}
				</view>
				<view class="u-f3" v-if="item.type=='text'">
					<input type="text" v-model="item.defaultvalue" :placeholder="'请输入你的'+item.title" />
				</view>
				<view class="u-f3 u-p-l-20" v-if="item.type=='radio'">
					<u-radio-group v-model="item.defaultvalue" @change="radioGroupChange">
						<u-radio v-for="(val, i) in item.radio_value" :key="i" :name="val">
							{{val}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="u-f3 u-p-l-20" v-if="item.type=='checkbox'">
					<u-checkbox-group @change="checkboxGroupChange($event,index)">
						<u-checkbox v-model="val.checked" v-for="(val, i) in item.radio_value" :key="i"
							:name="val.name">{{val.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="u-f3" v-if="item.type=='selects'" @click="show2Attr=item.checbox_value,show2=true">
					<input type="text" disabled v-model="item.defaultvalue" placeholder="请选择" />
				</view>
				<view class="u-f3" v-if="item.type=='datetime'" @click="showDate=true">
					<input type="text" disabled v-model="item.defaultvalue" placeholder="请选择" />
				</view>
				<view class="u-f3" v-if="item.type=='region'" @click="show=true">
					<input type="text" disabled v-model="item.defaultvalue" placeholder="请选择" />
				</view>
				<view class="u-f3" v-if="item.type=='select'">
					<input type="text" @click="showTap" disabled v-model="item.defaultvalue" placeholder="请选择" />

					<view class="u-f3 u-m-t-15 u-border-top u-p-t-15" v-if="item.defaultvalue=='其他'">
						<input type="text" v-model="otherSchool" placeholder="请输入" />
					</view>
				</view>
			</view>
			<!-- 选手信息 -->
			<view class=" u-border-bottom u-p-30" v-for="(data,dataIndex) in dataList" :key="dataIndex">
				<view class="u-p-b-20 u-f u-f-jsb">{{data.title}}（{{dataIndex+1}}）

					<button v-if="dataIndex>0" class="u-reset-button u-f-justify btn-del"
						@click="delData(dataIndex)">删除</button>
				</view>
				<view style="align-items: center;" class="u-f u-p-30 u-border-bottom" v-for="(item,index) in data.value"
					:key="index">

					<view class="u-f1"><text v-if="item.rule" style="color: red;margin-right: 5rpx;">*</text>
						{{item.title}}
					</view>
					<view class="u-f3" v-if="item.type=='text' || item.type=='datetime'">
						<input type="text" v-model="item.defaultvalue" :placeholder="'请输入你的'+item.title" />
					</view>
					<view class="u-f3 u-p-l-20" v-if="item.type=='radio'">
						<u-radio-group v-model="item.defaultvalue" @change="radioGroupChange">
							<u-radio v-for="(val, i) in item.radio_value" :key="i" :name="val">
								{{val}}
							</u-radio>
						</u-radio-group>
					</view>
					<view class="u-f3 u-p-l-20" v-if="item.type=='checkbox'">
						<u-checkbox-group @change="checkboxGroupChange($event,index)">
							<u-checkbox v-model="val.checked" v-for="(val, i) in item.radio_value" :key="i"
								:name="val.name">{{val.name}}</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="u-f3" v-if="item.type=='selects'" @click="show2Attr=item.checbox_value,show2=true">
						<input type="text" disabled v-model="item.defaultvalue" placeholder="请选择" />
					</view>
					<view class="u-f3" v-if="item.type=='region'" @click="show=true">
						<input type="text" disabled v-model="item.defaultvalue" placeholder="请选择" />
					</view>
					<view class="u-f3" v-if="item.type=='select'">
						<input type="text" @click="showTap" disabled v-model="item.defaultvalue" placeholder="请选择" />

						<view class="u-f3 u-m-t-15 u-border-top u-p-t-15" v-if="item.defaultvalue=='其他'">
							<input type="text" v-model="otherSchool" placeholder="请输入" />
						</view>
					</view>
				</view>
			</view>
			<view class="module-btn-add" v-if="dataList.length>0">
				<button class="u-reset-button u-f-justify btn" @click="addData">添加</button>
			</view>



		</view>
		<view class="u-m-t-20" style="background: #fff;" v-if="info.cost==2">
			<view class="u-p-30 u-font-bold u-font-16">支付方式</view>
			<u-radio-group v-model="payType" @change="radioGroupChange1" active-color="#09BB07">
				<view class="u-f-item u-f-jsb u-p-b-30">
					<view class="u-f-item u-p-l-30">
						<u-icon name="weixin-fill" size="40" color="#09BB07"></u-icon>
						<view class="u-p-l-20">微信支付</view>
					</view>
					<radio name="1"></radio>
				</view>
			</u-radio-group>
		</view>

		<!-- <view class="u-p-20 u-font-24" style="color: #999;">备注：如以上系统无所在学校，请选择其他学校，然后在其它学校输入框中填写所在学校全称</view> -->
		<view style="height: 180rpx;"></view>

		<view>
			
			<view class="footer padding-lr-bj"><button style="width: 100%;height: 90rpx;" class="cu-btn bg-gradual-orange round text-bold complete" @click="submit">确认</button></view>
		</view>


		<u-picker mode="time" v-model="showDate" :params="params" @confirm="confirmDate"></u-picker>
		<u-select v-model="show" :list="selectList" mode="single-column" @confirm="confirm"></u-select>

		<u-select v-model="show1" :list="schoolList" mode="single-column" @confirm="confirm1"></u-select>
		<u-select v-model="show2" :list="show2Attr" mode="single-column" @confirm="confirm2"></u-select>
	</view>
</template>

<script>
	export default {
		props: {
			tId: ''
		},
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				isAgree: false,
				fileList: [],
				showDate: false,
				action: '',
				info: '',
				formList: [],
				payType: '1',
				show2Attr: '',
				show2: false,
				show: false,
				selectList: [],
				chekIndex: '',
				dataList: [],
				dataListFiled: [],
				show1: '',
				dateIndex:'',
				loading: false,
				otherSchool: '',
				schoolList: [],
				selectIndex: '',
				selectsIndex: ''
			}
		},
		created(e) {
			this.getActivityDetail()
			// this.areaList()
		},
		methods: {
			goPrivacy() {
				uni.navigateTo({
					url: '/pages/index/article'
				})
			},
			delData(i) {
				this.dataList.splice(i, 1)
			},
			addData() {
				if (this.dataListFiled.length > 0) {
					if (this.dataList.length >= 30) {
						return
					}
					let i = JSON.parse(JSON.stringify(this.dataListFiled[0]))
					this.dataList.push(i)
				}
			},
			getActivityDetail() {

				uni.request({
					url: '/wanlshop/activity/template',
					method: 'POST',
					data: {
						template_id: this.tId
					},
					success: res => {

						for (let i in res.data) {
							if (res.data[i].type == 'radio') {
								res.data[i].radio_value = res.data[i].content.split(',');
								res.data[i].defaultvalue = res.data[i].radio_value[0];
							}
							if (res.data[i].type == 'checkbox') {
								let arr = [];
								res.data[i].radio_value = res.data[i].content.split(',');
								for (let j in res.data[i].radio_value) {
									arr.push({
										name: res.data[i].radio_value[j],
										checked: false
									})
								}
								res.data[i].radio_value = arr;
								res.data[i].defaultvalue = '';
							}
							if (res.data[i].type == 'region') {
								this.chekIndex = i;
							}
							if (res.data[i].type == 'datetime') {
								this.dateIndex = i;
							}
							if (res.data[i].type == 'select') {
								this.selectIndex = i
							}
							if (res.data[i].type == 'selects') {
								this.selectsIndex = i
							}

							if (res.data[i].type == 'addList') {
								this.dataList.push(JSON.parse(JSON.stringify(res.data[i])))
								this.dataListFiled.push(JSON.parse(JSON.stringify(res.data[i])))
							}
						}
						this.formList = res.data;
					}
				});

			},
			areaList() {
				this.$api.areaList({}, res => {
					if (res.code) {
						let arr = [];
						for (let i in res.data) {
							arr.push({
								value: res.data[i].id,
								label: res.data[i].name
							})
						}
						this.selectList = arr;
					}
				})
			},
			confirm(e) {
				this.formList[this.chekIndex].value = e[0].label;
				this.$api.schoolList({
					area_id: e[0].value
				}, res => {
					if (res.code) {
						let arr = [];
						for (let i in res.data) {
							arr.push({
								value: res.data[i].id,
								label: res.data[i].name
							})
						}
						this.schoolList = arr;
						let other = {
							value: '',
							label: '其他'
						}
						this.schoolList.push(other)
					}
				})
			},
			showTap() {
				if (!this.formList[this.chekIndex].value) {
					return this.$common.errorToShow('请先选择区域')
				}
				this.show1 = true;
			},
			confirm1(e) {
				this.formList[this.selectIndex].value = e[0].label;
			},
			confirmDate(e) {
				console.log(e,1212)
				this.formList[this.dateIndex].defaultvalue = `${e.year}-${e.month}-${e.day}`;
			},
			
			confirm2(e) {
				this.formList[this.selectsIndex].value = e[0].label;
			},
			radioGroupChange() {

			},
			radioGroupChange1() {

			},
			checkboxGroupChange(e, index) {
				console.log(e, index)
				this.formList[index].value = e;
			},
			submit() {
				// if (!this.isAgree) {
				// 	this.$common.errorToShow('请阅读隐私政策！')
				// 	return
				// }
				let data = {};
				for (let i in this.formList) {
					if (!this.formList[i].defaultvalue && this.formList[i].rule) {
						return this.$common.errorToShow('请输入你的' + this.formList[i].title)
					}
				}
				this.formList.forEach(item => data[item.name] = item.defaultvalue)

				if (data.unit == '其他') {
					data.unit = this.otherSchool
				}
				if (data.addList) {

					delete data.addList
				}

				if (this.dataList.length > 0) {
					let value = []

					this.dataList.forEach(item => {
						let show = {

						}
						item.value.some(i => {

							show[i.name] = i.defaultvalue
						})
						value.push(show)
					})
					data[this.dataList[0].name] = value
				}
				console.log(data, 111111)
				this.$emit('infoData',data)
				return
				// let _this = this;
				// if (_this.loading) {
				// 	return
				// }
				// _this.loading = true
				// uni.requestSubscribeMessage({
				// 	tmplIds: ['pTP90ANTTqW0D4Te88zmuL-W78Gyoq4Zt1clEqxU0EM'],
				// 	success(r) {
				// 		_this.addsubmit(data)
				// 	},
				// 	fail(err) {
				// 		_this.addsubmit(data)
				// 	},
				// })
			},
			addsubmit(data) {
				this.$api.addsubmit(data, res => {
					if (res.code) {
						if (this.info.cost == 2) {
							this.$api.addOrder({
								activity_id: this.id,
								apply_id: res.data
							}, ret => {
								if (ret.code) {
									this.$api.toPay({
										order_no: ret.data
									}, r => {
										let _this = this
										_this.loading = false
										if (r.code) {
											let data = r.data;
											uni.requestPayment({
												provider: 'wxpay',
												timeStamp: data.timeStamp,
												nonceStr: data.nonceStr,
												package: 'prepay_id=' + data.packAge,
												signType: data.signType,
												paySign: data.paySign,
												success(request) {
													_this.$common.errorToShow('支付成功',
														() => {
															uni.navigateBack({
																delta: 1
															})
														})
												}
											})
										} else {
											_this.$common.errorToShow(res.msg)
										}
									})
								}
							})
						} else {
							this.$common.errorToShow('提交成功', () => {
								uni.navigateBack({
									delta: 1
								})
							})
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.btn {
		font-size: 32rpx;
		color: #fff;
		background: linear-gradient(180deg, #33B6FF -0.02%, #5394FF 99.99%);
		border-radius: 20rpx;
		height: 96rpx;
		margin-top: 120rpx;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 30rpx;
		background: #fff;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		z-index: 60;
	}

	.btn {
		width: 262rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #3D7EEA 8.12%, #02B0F1 95.73%);
		border-radius: 50rpx;
		color: #fff;
		line-height: 72rpx;
		margin: 0;
	}

	.price {
		color: #DF0000;
	}

	.module-btn-add {
		padding: 20rpx;
		text-align: center;
	}

	.btn-del {
		width: 130rpx;
		height: 60rpx;
		background: #DF0000;
		border-radius: 10rpx;
		color: #fff;
		font-size: 24rpx;
		line-height: 60rpx;
		margin: 0;
	}


	/*隐藏滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.place {
		color: #C9C9C9;
	}

	input {
		font-size: 28rpx;
		padding-left: 20rpx;
		text-align: left;
	}

	.gray {
		color: #C0C0C0;
	}

	.graya {
		color: #AAAAAA;
	}

	.u-font-bold {
		font-weight: bold;
	}

	.u-f-space {
		flex-direction: column;
		display: flex;
		justify-content: space-between;
	}

	/*flex*/
	.u-f,
	.u-f-item,
	.u-f-justify,
	.u-f-right,
	.u-f-bottom,
	.u-f-end {
		display: flex;
		text-align: left;
	}

	.u-f-bottom {
		align-items: flex-end;
	}

	.u-f-item,
	.u-f-justify,
	.u-f-right {
		align-items: center;
	}

	.u-f-justify {
		justify-content: center;
	}

	.u-f-right {
		justify-content: flex-end;
	}

	.u-f-jsb {
		justify-content: space-between;
	}

	.u-f-end {
		justify-content: flex-end;
	}

	.u-f1 {
		flex: 1;
	}

	.u-f2 {
		flex: 2;
	}

	.u-f3 {
		flex: 3;
	}

	.u-f4 {
		flex: 4;
	}

	.u-f5 {
		flex: 5;
	}

	.u-f-column {
		flex-direction: column;
	}

	.ellipsis {
		width: 90%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ellipsiss {
		width: 98%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text-del {
		color: #ADADAD;
		text-decoration: line-through;
	}

	.f8 {
		font-size: 19rpx !important;
	}

	.huang {
		color: #FECC00 !important;
	}

	.f16 {
		font-size: 28rpx !important;
	}

	.hui {
		color: #ADADAD;
	}

	.noth {
		padding-top: 100rpx;
	}

	.noth>image {
		width: 240rpx;
	}

	.u-f-center {
		flex-direction: column;
		display: flex;
		justify-content: space-between;
	}

	.u-border-bottom {
		border-bottom: 1px solid #f5f5f5;
	}

	.u-p-30 {
		padding: 30rpx;
	}
</style>